<template>
  <div class="particulars">
    <!-- 顶部官网导航条 -->
    <navtop></navtop>
    <!-- 商品导航 -->
    <navtwo class="navtwo"></navtwo>
    <!-- 商品头部路径 -->
    <header>
      <div class="header_top">
        <ul>
          <li><router-link to="/">商城首页</router-link></li>
          <li>></li>
          <li><router-link to="/shopmall">智能手机</router-link></li>
          <li>></li>
          <li>{{ shopxinxi.name }}</li>
        </ul>
      </div>
    </header>

    <!-- 商品主体 -->
    <main>
      <!-- 左边商品展示 -->
      <div class="shopview" v-loading="loading">
        <!-- 商品主体 -->
        <div class="bigimg">
          <!-- <vue-photo-zoom-pro :url="ImgUrl"></vue-photo-zoom-pro> -->
          <image-zoomer :src="ImgUrl" :width="500" :height="500">
          </image-zoomer>
          <div class="box">
            <img src="../assets/box.png" alt="" />
          </div>
        </div>
        <!-- 商品下部多位展示 -->
        <div class="imglist">
          <ul>
            <li
              v-for="item in shopxinxi.s_goods_photos"
              :key="item.id"
              @mouseover="qiehuan(item.path)"
            >
              <img :src="item.path" alt="" />
            </li>
          </ul>
        </div>
      </div>
      <!-- 右边商品详情 -->
      <div class="shoptext" v-loading="loading">
        <!-- 商品名称详情 -->
        <div class="title-top">
          <div class="title">
            <p>{{ shopxinxi.name }}</p>
          </div>
          <div class="text">
            {{ shopxinxi.desc }}
            <!-- <div v-html="shopxinxi.rich_text">{{ shopxinxi.rich_text }}</div> -->
          </div>
        </div>
        <hr />
        <!-- 价格赠品 -->
        <div class="price_box">
          <div class="price">
            <p><span>¥</span>{{ shopxinxi.price.toFixed(2) }}</p>
          </div>
          <div class="gift">
            <div class="one">
              <p>赠品</p>
              <span>院线热播电影票两张</span>
            </div>
            <div class="two">
              <p>赠品</p>
              <span>购物送积分</span>
            </div>
          </div>
        </div>
        <hr />

        <!-- SKU -->
        <div
          v-for="(item, parentIndex) in GoodsSku.property"
          :key="item.id"
          class="row"
        >
          <!-- sku选项文字 -->
          <div class="text">{{ item.keyName }}:</div>

          <!-- 款式盒子 -->
          <div class="box">
            <div
              v-for="(sku, childIndex) in item.s_attributesValues"
              :key="sku.id"
              class="btn"
              :class="{
                // 双层for中的动态样式
                active: childIndex === property[parentIndex].selected,
              }"
              @click="
                changeCondition(
                  sku,
                  parentIndex,
                  childIndex,
                  sku.attribute_value
                )
              "
            >
              <!-- <img v-if="sku.photo" :src="sku.photo" class="sku-img" /> -->
              {{ sku.attribute_value }}
            </div>
          </div>
        </div>

        <!-- 价格库存 -->
        <!-- <div v-if="showProducts.length" class="price-stock">
          库存--{{ showProducts[0].goods_stock }}
          <br />
          价格--{{ showProducts[0].goods_price }}
        </div> -->
        <!-- 数量 -->
        <div class="number">
          <div class="title">
            <p>数量</p>
          </div>
          <div class="inpnumber">
            <template>
              <el-input-number
                id="numbox"
                v-model="num"
                :min="1"
                :max="100"
                label="描述文字"
              ></el-input-number>
            </template>
          </div>
        </div>
        <hr />
        <!-- 总计 -->
        <div class="total">
          <div class="title">
            <p>总计：</p>
          </div>
          <p>{{ (shopxinxi.price * num).toFixed(2) }}</p>
        </div>
        <!-- 加入购物车 -->
        <div class="button_box">
          <template>
            <el-button :plain="true" @click="addCar" id="onebutton"
              >加入购物车</el-button
            >
          </template>
          <template>
            <el-button :plain="true" @click="skipCar" id="twobutton"
              >立即购买</el-button
            >
          </template>
          <!-- <button @click="addCar">加入购物车</button> -->
        </div>
      </div>
    </main>

    <!-- 配件推荐 -->
    <div class="parts">
      <div class="parts_box">
        <!-- 头部标题——配件推荐 -->
        <div class="parts_head">
          <p>配件推荐</p>
        </div>

        <!-- 轮播 -->
        <div class="slideshow-swiper" v-loading="loading3">
          <swiper :options="swiperOption" class="swipers swiper-no-swiping">
            <swiper-slide v-for="item in swiperimg" :key="item.id">
              <div class="imgbox" @click.stop="ttt(item.id)">
                <div class="imgtop">
                  <!-- <img
                    :src="swipertop[0] && swipertop[0].s_goods_photos[0].path"
                    alt=""
                  /> -->
                </div>
                <div class="imgtwo">
                  <img :src="item.s_goods_photos[0].path" alt="" />
                </div>
                <div class="text">
                  <p>{{ item.name }}</p>
                  <p>{{ item.desc }}</p>
                  <p>¥{{ item.price.toFixed(2) }}</p>
                </div>
              </div>
            </swiper-slide>
            <div class="swiper-pagination" slot="pagination"></div>
            <div class="swiper-button-prev" slot="button-prev"></div>
            <div class="swiper-button-next" slot="button-next"></div>
          </swiper>
        </div>
      </div>
    </div>

    <!-- 参数一栏表 -->
    <div class="parameter">
      <div class="parameter_nav">
        <!-- 信息选项卡 -->
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="详细信息" name="first">
            <div class="parameter_main">
              <!-- 详情图头部文字 -->
              <div class="main_nav">
                <div class="text_left">
                  <img src="../assets/particulars/Parameter.png" alt="" />
                </div>
                <div class="text_right">
                  <img src="../assets/particulars/contrast.png" alt="" />
                </div>
              </div>

              <!-- 详情图 -->
              <div class="main_img">
                <div v-html="shopxinxi.rich_text"></div>
              </div>
            </div>
          </el-tab-pane>
          <!-- 用户评论 -->
          <el-tab-pane
            :label="`用户评论(${labelNum}%好评)`"
            name="second"
            style="height: 2500px"
          >
            <div class="comment">
              <div class="head">
                <p>好评度</p>
                &nbsp;&nbsp;&nbsp;
                <h2>{{ labelNum }}%</h2>
              </div>

              <!-- 评论 -->
              <div class="commen" v-for="index in text" :key="index.id">
                <div class="commen_head">
                  <div class="ico">
                    <img :src="index.img" alt="" />
                  </div>
                  <div class="name">
                    {{ index.name }}
                  </div>
                  <div class="grade" v-for="index of gradeIco" :key="index">
                    <i
                      class="el-icon-star-on"
                      style="color: #f5b85a; font-size: 40px"
                    ></i>
                  </div>
                </div>
                <div class="commen_main">
                  <div class="text">
                    <p>
                      {{ index.text }}
                    </p>
                  </div>
                  <div class="day">2023-02-22 21:25:15</div>
                  <div class="reply">
                    {{ index.reply }}
                  </div>
                </div>
              </div>
              <!-- <CommenView />
              <CommenView />
              <CommenView />
              <CommenView />
              <CommenView /> -->
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>

    <!-- 底部 -->
    <bottomlist></bottomlist>
  </div>
</template>

<script>
// import CommenView from "../components/commen.vue";
import navtop from "../components/navtop";
import navtwo from "../components/navTwo";
import bottomlist from "../components/bottomList";
import { singleshop, AddCar } from "../api/test";
import vuePhotoZoomPro from "vue-photo-zoom-pro";
import "vue-photo-zoom-pro/dist/style/vue-photo-zoom-pro.css";
import { Shopimg, getBanner, getGoodsSku } from "../api/test";
import mockData from "../utils/data.js";
import ImageZoomer from "ht-image-zoomer";

import { getGoodDetail } from "../assets/other/request.js";

import data from "../utils/data.js";
export default {
  name: "particulars",
  components: {
    // CommenView,
    navtop,
    navtwo,
    bottomlist,

    ImageZoomer,
  },
  data() {
    return {
      skuArr: [],
      GoodsSku: [],
      num: 1,
      ImgUrl: "",
      shopxinxi: [],
      loading: true,
      loading3: true,
      activeName: "first",
      swiperOption: {
        // 一次显示x张图
        slidesPerView: 4,
        // 设置前进后退按钮
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
        // 设置自动轮播
        autoplay: {
          delay: 5000, // 5秒切换一次
        },
        // 设置轮播可循环
        loop: true,
      },

      swiperimg: [],
      labelNum: "",
      //单个商品对象
      good: {},
      //商品的图片数组
      goodphotos: [],
      //当前展示的图片路径
      currentImg: "",
      //--- sku相关 ---
      //所有属性值列表
      property: [],
      //库存列表
      stock_list: [],
      //筛选的条件对象
      condition: {},
      keyName: "",
      gradeIco: "",
      userName: "",
      img: "",
      userText: "",
      gradeIcoNum: "",
      userTextNum: 1,
      replyText: "",
      momentSku: {},
      text: [
        {
          img: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202002%2F25%2F20200225170537_pweoy.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1680147921&t=3afa074beb2b21c539495ebcb5194572",
          name: "刘伟杰",
          text: "收到了，最近忙了些，今天才来评价。我一直用ViⅤO，用习惯了，感觉没有哪里不方便的，添置手机也懒得去选了，直接在官网买一台自己需要的型号，Ⅹ6→X9→x20→X50→，一直沒失望过，相信这次的X90也好用！",
          reply:
            "[官方商城回复]：友不在多，贵在风雨同行；情不论久，重在有求必应。好缘分不会输给时间，好朋友来了以后就不会再走。您对vivo的支持，我们将回报您十分惊喜！",
          id: 1,
        },
        {
          img: "https://p5.itc.cn/q_70/images03/20210406/0890a76a8f2e4019b5798fc875f10a3f.jpeg",
          name: "江永康",
          text: "喜欢这款机型很久了，正好这次出了白色情人款，就果断入手了，真机手感真的很棒！加上白色的配色，简直美爆了！very nise！",
          reply:
            "外观好看颜值高，智能散热系统温控好，天玑9000+旗舰处理器和独立显示芯片Pro+硬核双芯性能强悍，后置5000万像素大底OIS主摄+800万像素超广角+200万像素微距镜头拍摄也不错，还有等效4700mAh电池续航强劲~",
          id: 2,
        },
        {
          img: "https://inews.gtimg.com/newsapp_bt/0/14043621628/641",
          name: "刘瑞聪",
          text: "四年前从苹果换成vivo，一直都用的这个品牌，这是买的第三个vivo了，国产手机中性价比很高的手机，操作顺畅，拍照像数超赞，后盖在灯光照射下还有六芒星的图案，超级漂亮",
          reply:
            "iQOO 10自我介绍一下，搭载骁龙8+处理器+自研芯片V1+，配备120W闪充，4700mAh大电池，畅享闪充快感与强劲续航；强悍性能，相信会给您带来惊喜的哦~",
          id: 3,
        },
        {
          img: "https://img1.baidu.com/it/u=3053189844,2196978533&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
          name: "黄波",
          text: "手机收到了，手感不错，漂亮，内存大，充电快，像素高，拍照好看，处理器强大。一直在用vivo手机，以后会继续支持",
          reply:
            "台积电4nm制程工艺，性能强劲，功耗控制出色，轻松应对日常多任务处理，还有120W FlashCharge闪充技术，双电荷泵和双电芯架构等多种技术，带来快速充电体验~",
          id: 4,
        },
        {
          img: "https://tupian.qqw21.com/article/UploadPic/2022-4/20224713353913168.jpg",
          name: "康振鹏",
          text: "手机收到后很喜欢，性价比很高，白色绝了，之前买了红色，又买的给朋友，屏幕流畅，晚上灯光照射下会有六芒星图案，非常满意",
          reply:
            "好看的外观下，更有强悍的性能加持：骁龙8+处理器+自研芯片V1+，120W超快闪充，等效4700mAh大电池，搭配6.78英寸120Hz E5 2D柔性直屏 ，后置超感光影像系统，5000万像素GN5大底OIS主摄+1300万像素超广角+1200万像素专业人像镜头，实力全面提升~",
          id: 5,
        },
      ],
    };
  },
  methods: {
    changeImg(e) {
      this.currentImg = e.target.src;
    },
    changeCondition(skuData, parentIndex, childIndex, value) {
      //点击添加样式
      console.log(
        this.GoodsSku.property[parentIndex].s_attributesValues[childIndex]
          .attribute_value
      );
      //替换点击的sku
      this.momentSku[this.GoodsSku.property[parentIndex].keyName] =
        this.GoodsSku.property[parentIndex].s_attributesValues[
          childIndex
        ].attribute_value;
      console.log(this.momentSku);

      //
      this.property[parentIndex].selected = childIndex;
      // console.log(skuData, parentIndex, childIndex);
      //toString保证数据的类型都是字符串
      //修改的condition
      this.condition.goods_specs.splice(parentIndex, 1, skuData.id.toString());

      console.log(skuData, parentIndex, childIndex, value);

      console.log();
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    qiehuan(imgurl) {
      this.ImgUrl = imgurl;
    },
    setSkuArrFn() {
      // localStorage.removeItem("skuArr");
      this.momentSku.id = new Date().getTime();
      let skuarr = JSON.parse(localStorage.getItem("skuArr")) || [];
      skuarr.push(this.momentSku);
      localStorage.setItem("skuArr", JSON.stringify(skuarr));
    },
    addCar() {
      if (sessionStorage.getItem("user")) {
        let shopIdtwo = this.$route.params.id;
        AddCar({
          goods_id: shopIdtwo,
          num: this.num,
          project_id: 149,
        }).then((res) => {
          console.log(res);
          this.setSkuArrFn();
        });
        this.$message({
          message: "添加成功",
          type: "success",
        });
      } else {
        this.$message({
          message: `请先登陆哦！即将跳转至登陆页`,
          type: "warning",
          duration: 1000,
        });
        setTimeout(() => {
          this.$router.push({ path: "/login" });
        }, 1000);
      }
    },

    skipCar() {
      if (sessionStorage.getItem("user")) {
        let shopIdtwo = this.$route.params.id;
        AddCar({
          goods_id: shopIdtwo,
          num: this.num,
          project_id: 149,
        }).then((res) => {
          console.log(res);

          this.setSkuArrFn();
          this.$router.push({ path: "/personal/shopCar" });
        });
      } else {
        this.$message({
          message: `请先登陆哦！即将跳转至登陆页`,
          type: "warning",
          duration: 1000,
        });
        setTimeout(() => {
          this.$router.push({ path: "/login" });
        }, 1000);
      }
    },
    ttt(item) {
      this.$router.push({ path: `/particulars/${item}` });
      window.location.reload()
    },
    async over(item) {
      //修改状态值
      this.flag = true;
      this.title = item.name;
      await Shopimg({
        project_id: 149,
        classify_id: item.children[0].id,
      }).then((res) => {
        this.shopMinTop = res.data.result.rows;
        // console.log(res.data.result.rows);
      });
      await Shopimg({
        project_id: 149,
        classify_id: item.children[1].id,
      }).then((res) => {
        this.shopMinBottom = res.data.result.rows;
      });
    },
  },
  async created() {
    let Bhistory = JSON.parse(localStorage.getItem("Bhistory")) || [];
    console.log(Bhistory);
    Bhistory.unshift(this.$route.params.id);
    Bhistory = Array.from(new Set(Bhistory));
    localStorage.setItem("Bhistory", JSON.stringify(Bhistory));
    this.gradeIco = Math.round(Math.random() * (5 - 2) + 2);
    // this.userName = Math.random().toString(36).slice(-8);
    // 随机选择一个数，由数组长度决定
    this.userTextNum = Math.round(
      Math.random() * (this.text.length - 1 - 0) + 0
    );

    await getGoodsSku({ id: this.$route.params.id })
      .then((res) => {
        this.GoodsSku = res.data.result;
        let skuObj = {
          // id: new Date().getTime(),
          shopid: this.$route.params.id,
        };
        console.log(this.GoodsSku.property);
        // let arr = [];
        for (let item of this.GoodsSku.property) {
          console.log(item.keyName);
          let obj = {};
          obj[item.keyName] = item.s_attributesValues[0].attribute_value;
          // skuObj.skuInfo.push(obj);
          skuObj[item.keyName] = item.s_attributesValues[0].attribute_value;
        }
        console.log(skuObj);
        this.momentSku = skuObj;
      })
      .catch((err) => {
        console.log(err);
      });

    this.labelNum = Math.floor(Math.random() * 30) + 60;
    let shopId = this.$route.params.id;
    singleshop(shopId).then((res) => {
      // console.log(res);
      this.ImgUrl = res.data.result.s_goods_photos[0].path;
      this.shopxinxi = res.data.result;
      this.loading = false;
    });

    const reqList = [923, 930, 939, 952, 953];
    for (let id of reqList) {
      if (id == 923) {
        if (sessionStorage.getItem("classtop")) {
          this.classtop = JSON.parse(sessionStorage.getItem("classtop"));
          this.loading2 = false;
        } else {
          Shopimg({
            project_id: 149,
            classify_id: id,
          })
            .then((res) => {
              sessionStorage.setItem(
                "classtop",
                JSON.stringify(res.data.result.rows)
              );
              this.classtop = JSON.parse(sessionStorage.getItem("classtop"));
              this.loading2 = false;
            })
            .catch((err) => {
              this.$message({
                message: "页面错误，请重新刷新页面",
                type: "warning",
              });
            });
        }
      }
      if (id == 930) {
        if (sessionStorage.getItem("swiperimg")) {
          this.swiperimg = JSON.parse(sessionStorage.getItem("swiperimg"));
          this.loading3 = false;
        } else {
          Shopimg({
            project_id: 149,
            classify_id: id,
          })
            .then((res) => {
              sessionStorage.setItem(
                "swiperimg",
                JSON.stringify(res.data.result.rows)
              );
              this.swiperimg = JSON.parse(sessionStorage.getItem("swiperimg"));
              this.loading3 = false;
            })
            .catch((err) => {
              this.$message({
                message: "页面错误，请重新刷新页面",
                type: "warning",
              });
            });
        }
      }
      if (id == 939) {
        if (sessionStorage.getItem("swipertop")) {
          this.swipertop = JSON.parse(sessionStorage.getItem("swipertop"));
          this.loading4 = false;
        } else {
          Shopimg({
            project_id: 149,
            classify_id: id,
          })
            .then((res) => {
              sessionStorage.setItem(
                "swipertop",
                JSON.stringify(res.data.result.rows)
              );
              this.swipertop = JSON.parse(sessionStorage.getItem("swipertop"));
              this.loading4 = false;
            })
            .catch((err) => {
              this.$message({
                message: "页面错误，请重新刷新页面",
                type: "warning",
              });
            });
        }
      }
      if (id == 952) {
        if (sessionStorage.getItem("hootprefec")) {
          this.hootprefec = JSON.parse(sessionStorage.getItem("hootprefec"));
          this.loading5 = false;
        } else {
          Shopimg({
            project_id: 149,
            classify_id: id,
          })
            .then((res) => {
              sessionStorage.setItem(
                "hootprefec",
                JSON.stringify(res.data.result.rows)
              );
              this.hootprefec = JSON.parse(
                sessionStorage.getItem("hootprefec")
              );
              this.loading5 = false;
            })
            .catch((err) => {
              this.$message({
                message: "页面错误，请重新刷新页面",
                type: "warning",
              });
            });
        }
      }
      if (id == 953) {
        if (sessionStorage.getItem("boutphone")) {
          this.boutphone = JSON.parse(sessionStorage.getItem("boutphone"));
          this.loading6 = false;
        } else {
          Shopimg({
            project_id: 149,
            classify_id: id,
          })
            .then((res) => {
              sessionStorage.setItem(
                "boutphone",
                JSON.stringify(res.data.result.rows)
              );
              this.boutphone = JSON.parse(sessionStorage.getItem("boutphone"));
              this.loading6 = false;
            })
            .catch((err) => {
              this.$message({
                message: "页面错误，请重新刷新页面",
                type: "warning",
              });
            });
        }
      }
    }
  },

  beforeDestroy() {
    clearInterval(this.timer);
  },
  computed: {
    showProducts() {
      return this.stock_list.filter(
        (prod) =>
          // //对比方法
          prod.goods_specs.toString() == this.condition.goods_specs.toString()
      );
    },
  },
  async mounted() {
    let res = await getGoodDetail(this.$route.params.id);
    // console.log(res);
    this.good = res.data.result;
    this.goodphotos = res.data.result.s_goods_photos;
    this.currentImg = this.goodphotos[0].path;

    //--- sku ---
    //获取并处理sku数据
    mockData.property.forEach((item) => {
      item.selected = 0; //0默认选中第一个，-1默认没有选中的
    });
    //排序方便处理
    mockData.stock_list = mockData.stock_list.map((item) => {
      item.goods_specs = item.goods_specs.split(",").sort();
      return item;
    });
    this.property = mockData.property;
    this.stock_list = mockData.stock_list;
    // console.log(this.property, this.stock_list);
    //拿到 sku中筛选用的属性名
    let tempSku = JSON.parse(JSON.stringify(this.stock_list[0]["goods_specs"]));
    //初始化赋值条件对象的goods_specs属性为stock_list的第一个
    this.$set(this.condition, "goods_specs", tempSku);
    // console.log('条件对象', this.condition);
    // window.location.reload();
  },
};
</script>

<style lang="scss" scoped>
img {
  height: 100%;
  display: block;
}
.navtwo {
  background-color: #f7f7f7;
  position: relative;
}
.particulars {
  header {
    padding: 0 8%;
    .header_top {
      ul {
        display: flex;
        align-items: center;
        li {
          line-height: 70px;
          padding: 0 5px;
          font-size: 12px;
          a {
            color: #000;
          }
        }
      }
    }
  }
  main {
    padding: 50px 8%;
    display: flex;
    justify-content: space-between;
    // padding-bottom: 200px;
    .shopview {
      width: 515px;
      .bigimg {
        position: relative;
        width: 100%;
        height: 515px;

        .box {
          position: absolute;
          top: 0;
          right: 0;
        }
      }
      .imglist {
        width: 100%;
        height: 100px;
        padding-top: 30px;
        ul {
          display: flex;
          justify-content: space-around;
          li {
            width: 100px;
            height: 100px;
            img {
              width: auto;
              height: 100%;
              display: block;
            }
          }
        }
      }
    }
    .shoptext {
      width: 510px;
      // height: 500px;
      hr {
        color: gray;
      }

      //   background-color: red;
      .title-top {
        .title {
          p {
            font-size: 30px;
            text-align: left;
          }
        }
        .text {
          display: flex;
          margin-top: 30px;
          text-align: left;
          margin-bottom: 30px;
          font-size: 12px;
          color: red;
          :first-child {
            color: #000;
          }
        }
      }

      .price_box {
        margin-top: 30px;
        margin-bottom: 30px;
        display: flex;
        .price {
          width: 50%;

          p {
            font-size: 30px;
            color: red;
            letter-spacing: 3px;
            span {
              display: inline-block;
              margin-right: 5px;
              font-size: 20px;
            }
          }
        }
        .gift {
          width: 50%;
          border-left: 1px solid gray;
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          .one,
          .two {
            display: flex;
            align-items: center;
            p {
              background-color: red;
              color: #fff;
              padding: 2px 5px;
              margin: 0 10px;
            }
            span {
              font-size: 16px;
            }
          }
        }
      }

      .row {
        margin: 20px 0px;
        font-size: 20px;
        gap: 10px;
        .text {
          width: 10%;
          margin-left: 10px;
        }
        .active {
          /* background: #eee; */
          background-color: rgb(222, 219, 219);
        }
        .box {
          width: 100%;
          display: flex;
          justify-content: space-around;
          margin: 20px 0px;
          .btn {
            display: flex;
            justify-content: center;
            width: 45%;
            height: 50px;
            line-height: 50px;
            text-align: center;
            border: 1px solid grey;
            border-radius: 10px;
            cursor: pointer;
            .sku-img {
              display: block;
              width: 50px;
              height: 50px;
            }
          }
        }
      }

      .number {
        margin-top: 30px;
        text-align: left;
        margin-bottom: 30px;
        .title {
          p {
            font-size: 25px;
          }
        }
        .inpnumber {
          margin-top: 20px;
        }
      }

      .total {
        display: flex;
        align-items: center;
        text-align: left;
        margin-top: 30px;
        .title {
          p {
            font-size: 25px;
            color: #000;
            font-weight: 700;
          }
        }
        p {
          font-size: 30px;
          color: red;
        }
      }

      .button_box {
        margin-top: 40px;
        display: flex;
        justify-content: space-around;

        #onebutton,
        #twobutton {
          width: 200px;
          height: 60px;
          border-radius: 60px;
          border: none;
          color: #fff;
          background-color: #e63541;
        }

        #onebutton {
          background-color: #444;
        }
      }
    }
  }
  .parts {
    width: 100%;
    height: 600px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    background-color: #f7f7f7;
    .parts_box {
      width: 1200px;
      height: 490px;
      .parts_head {
        text-align: left;
      }
      .slideshow-swiper {
        margin-top: 30px;
        .swipers {
          .imgbox {
            display: flex;
            flex-direction: column;
            width: 293px;
            height: 390px;
            padding-top: 10px;
            background-color: #fff;
            transition: all 0.3s;
            .imgtop {
              margin-left: 20px;
              margin-top: 15px;
              img {
                width: 73px;
                height: 23px;
                margin: 0;
              }
            }
            .imgtwo {
              img {
                width: 172px;
                height: 172px;
              }
            }

            .text {
              margin-top: 20px;
              flex: 1;
              p:first-child {
                font-size: 18px;
                margin-bottom: 15px;
              }
              p:nth-child(2) {
                font-size: 14px;
                margin-bottom: 15px;
              }
              p:nth-child(3) {
                font-size: 25px;
                color: red;
                font-weight: 500;
                // margin-bottom: 15px;
              }
            }
          }

          .imgbox:hover {
            box-shadow: 0 3px 10px gray;
            transform: translateY(-2px);
          }
        }
      }
    }
  }
  .parameter {
    padding: 20px 50px;
    .parameter_nav {
      align-items: center;
      font-size: 17px;
      color: #656565;
      position: relative;
    }
    .parameter_main {
      width: 1250px;
      margin: 0 auto;
      margin-top: 70px;
      background-color: #444;
      .main_nav {
        display: flex;
        .text_left {
          width: 50%;
          height: 67px;
          img {
            display: block;
            width: 100%;
            height: 100%;
          }
        }
        .text_right {
          width: 50%;
          height: 67px;
          img {
            display: block;
            width: 100%;
            height: 100%;
          }
        }
      }

      .main_img {
        width: 100%;
      }
    }
    .comment {
      width: 100%;
      height: 600px;
      .head {
        width: 100%;
        height: 100px;
        padding-left: 30px;
        display: flex;
        align-items: center;
        p {
          font-size: 15px;
          color: #656565;
          font-weight: 300;
        }
        h2 {
          font-size: 25px;
          color: black;
          font-weight: 400;
        }
      }
      .commen {
        width: 100%;
        height: 300px;
        padding: 50px 0px 60px;
        border-bottom: 1px solid #e4e4e4;
        .commen_head {
          width: 500px;
          height: 50px;
          margin-left: 20px;
          display: flex;
          align-items: center;
          .ico {
            width: 50px;
            height: 50px;
            margin-right: 20px;
            border-radius: 50%;
            border: 1px solid black;
            img {
              width: 100%;
              height: 100%;
              display: block;
              border-radius: 50%;
            }
          }
          .name {
            font-size: 15px;
            margin-right: 20px;
          }
        }
        .commen_main {
          width: 85%;
          height: 250px;
          margin: 20px 0px 20px 180px;
          display: flex;
          flex-direction: column;
          .text {
            width: 100%;
            float: right;
            text-align: start;
            margin: 10px 0px;
            p {
              font-size: 18px;
              line-height: 30px;
              word-wrap: normal;
            }
          }
          .day {
            width: 170px;
            height: 20px;
            color: #e4e4e4;
            font-size: 15px;
          }
          .reply {
            width: 100%;
            height: 80px;
            margin: 20px 0px;
            text-align: start;
            padding: 0px 10px;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #f7f7f5;
          }
        }
      }
    }
  }
}
</style>